<template>
  <header>
    <div class="header__back"><i class="iconfont icon-fanhui"></i></div>
    <input class="header__input" type="text" placeholder="输入城市/景点游玩/主题"/>
    <router-link to="/city">
      <div class="header__city">{{this.city}}<i class="iconfont icon-xialasanjiao"></i></div>
    </router-link>
  </header>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'homeHeader',
  computed: {
    ...mapState(['city'])
  }
}
</script>

<style lang="stylus" scoped>
  header
    display: flex
    height: 86px
    line-height 86px
    width: 100%
    background: #00bcd4
    color: #fff
    .header__back
      padding: 0 30px
      text-align: center
    .header__input
      flex: 1
      width: 100%
      height: 52px
      padding: 0 20px
      margin-top: 17px
      border-radius: 6px;/*no*/
      line-height 52px
      color:#ccc
    .header__city
      float: right
      padding: 0 30px
      color: #fff
.iconfont {
  font-size: 45px;/*px*/
  font-weight: 700
}
</style>
